<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
    table tr{ height:40px;}
    .min-width{
        width: 180px;
    }
    .min-td-width{
        text-align: center;
        width: 80px;
    }
</style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>商品信息</a></li>
                            <li><a>属性列表</a></li>
                        </ol>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover table-bordered" style="padding: 12px 0px 12px 0px;">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th>属性名</th>
                                    <th>属性值</th>
                                    <th style="width:80px;text-align: center;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="min-width">型号</td>
                                    <td>

                                    </td>
                                    <td class="min-td-width">
                                            <a href="javascript:;" class="" v-on:click="add(this);">新增</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="min-width">品牌</td>
                                    <td>

                                    </td>
                                    <td class="min-td-width">
                                            <a href="javascript:;" class="" v-on:click="add(this);">新增</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="min-width">颜色</td>
                                    <td>

                                    </td>
                                    <td class="min-td-width">
                                            <a href="javascript:;" class="" v-on:click="add(this);">新增</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="min-width">自定义属性1</td>
                                    <td>

                                    </td>
                                    <td class="min-td-width">
                                            <a href="javascript:;" class="" v-on:click="add(this);">新增</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="min-width">自定义属性2</td>
                                    <td>

                                    </td>
                                    <td class="min-td-width">
                                        <a href="javascript:;" class="" v-on:click="add(this);">新增</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;" v-show="pageInit">
            <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                <h4 slot="header">编辑商品属性信息</h4>
                <div slot="body" class="clearfix">
                    <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">属性名
                                <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title=""
                                    data-original-title="属性名一旦修改，系统中所有的属性名都会改变，请谨慎修改"></label>
                            </label>
                            <div class="col-sm-4">
                                <input id="firstname" name="firstname" placeholder="型号、品牌、颜色都是属性名" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">属性值</label>
                            <div class="col-sm-4">
                                <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true"
                                    aria-invalid="false">
                            </div>
                        </div>
                    </form>
                </div>
            </modal>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script type="text/javascript">
        var vmData = {
            detailModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            add: function (obj) {
                vm.detailModal.show = true;
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>